<template>
  <header>
    <div class="logo">
      <img src="/assets/logo.png" alt="ee-ui" />
      Entry Engine
    </div>

    <div class="content">
      <ee-button @click="preOutput">
        预设导出
      </ee-button>
      <ee-button @click="preImport">
        预设导入
      </ee-button>
    </div>
  </header>

  <main>
    <!-- 左侧控件导航栏 -->
    <nav>
      <ul>
        <template v-for="item in components" :key="item.value">
          <router-link :to="`/${item.value.name}`" :class="`eet${item.value.name == component?.name ? ' selected' : ''}`">
            <li>
              {{ item.label }}
            </li>
          </router-link>
        </template>
      </ul>
    </nav>

    <!-- 具体一个控件的文档 -->
    <div class="attrs" v-if="component">
      <h2 :id="component.name">{{ component.name }}</h2>
      <p v-if="component.note">{{ component.note }}</p><template v-else />

      <ul>
        <doc-type2 v-for="item, index in testTypes" :key="index" :type="item" value-type>
        </doc-type2>

        <doc-type2 v-for="item, index in testTypes" :key="index" :type="item">
        </doc-type2>
      </ul>

      <div class="demos">
        <doc-demo title="介绍" description="按钮用于触发一个操作，如提交表单。" code="<ee-button>button</ee-button>"
                  @save="savePreview"></doc-demo>
        <ee-dialog title="保存代码" confirm="0" cancel="0" closeable v-model="saveDialogFlag" :on-confirm="save">
          <div class="save">
            <div>
              <div>标题</div>
              <ee-input clear placeholder="标题" v-model="beSave.title" />
            </div>
            <div>
              <div>描述</div>
              <ee-input clear placeholder="描述" style="height: 10em;" v-model="beSave.description" />
            </div>
          </div>
        </ee-dialog>
      </div>

      <template v-if="component.props.length">
        <doc-demo title="Props 带编辑代码" :code="propsCode">
          <ee-table :datas="component.props"
                    :columns="[{ name: 'name', title: '属性' }, { name: 'note', title: '说明' }, { name: 'type', title: '类型' }]">
            <template #note="{ data, value }">
              <div>
                {{ value }}
                <template v-if="data.examples">
                  <code v-for="example, index in data.examples" :key="index">{{ example }}</code>
                </template><template v-else />
              </div>
            </template>
            <template #type="{ data, value }">
              <doc-type :type="window.docs['./display/ee-shape.vue.shape']"></doc-type>
              <!-- <doc-type :type="window.docs['./form/ee-form.vue.field']"></doc-type> -->
              <!-- <doc-type :type="window.docs['./form/index.js.filter']"></doc-type> -->
              <!-- <doc-type :type="window.docs['./form/index.js.options']"></doc-type> -->
            </template>
          </ee-table>
        </doc-demo>
      </template><template v-else />
      <template v-if="component.props.length">
        <h2 id="props">Props</h2>
        <ee-table :datas="component.props">
          <template #note="{ data, value }">
            <div>
              {{ value }}
              <template v-if="data.examples">
                <code v-for="example, index in data.examples" :key="index">{{ example }}</code>
              </template><template v-else />
            </div>
          </template>
        </ee-table>
        <doc-demo code="<ee-button>button</ee-button>"></doc-demo>
      </template><template v-else />
      <template v-if="component.emits.length">
        <h2 id="emits">Emits</h2>
        <ee-table :datas="component.emits"></ee-table>
      </template><template v-else />
      <template v-if="component.emits.length">
        <h2 id="slots">Slots</h2>
        <ee-table :datas="component.slots"></ee-table>
      </template><template v-else />
      <template v-if="component.computed.length">
        <h2 id="computed">Computed</h2>
        <ee-table :datas="component.computed"></ee-table>
      </template><template v-else />
      <template v-if="component.methods.length">
        <h2 id="methods">Methods</h2>
        <ee-table :datas="component.methods"></ee-table>
      </template><template v-else />
    </div>

    <nav class="preview">
      <div>
        <!-- <textarea v-model="code" rows="10" cols="50"></textarea>
        <ee-button @click="compile()">编译</ee-button>
        <div id="dapp" style="background-color:cornflowerblue;min-width:100px;min-height:100px;">
          <component :is="dapp"></component>
        </div> -->
      </div>
    </nav>
  </main>
</template>

<script type="text/javascript">
import { exportContent, importJson } from '@/ee-ui/__use/file';
import { compileVue } from './code'
export default {
  name: "App2",
  data() {
    return {
      code: '<li style="color:red"><ee-button>123</ee-button></li>',
      dapp: undefined,
      c: undefined,
      components: Object.keys(window.docs).filter(i => window.docs[i].type == 'component').map(i => {
        const value = window.docs[i];
        return {
          label: value.name,
          value: value.value,
        }
      }),
      // msg: "Hello My Parent Component",
      propsObject: {},
      visible: true,
      saveDialogFlag: false,
      beSave: {},
      selectedItem: {
        pretitle: '预设标题',
        predescription: '预设内容',
        code: '预设代码',
      },

      testTypes: [
        {
          name: 'Number',
          type: 'string',
          value: 'Number'
        },
        {
          name: './display/ee-shape.vue.shape',
          type: 'ref',
        },
        {
          name: '',
          type: 'enum',
          value: [{
            name: 'up',
          }, {
            name: 'down',
          }, {
            name: 'left',
          }, {
            name: 'right',
          }]
        },
        {
          name: 'Promise',
          type: 'generic',
          value: [{
            name: 'Number',
            type: 'string',
            value: 'Number'
          }]
        },
        {
          name: 'func',
          note: '函数类型说明',
          type: 'function',
          value: [{
            name: 'arg1',
            type: {
              name: 'String',
              type: 'string',
            },
          }, {
            name: 'arg2',
            type: {
              name: 'Boolean',
              type: 'string',
            },
          }, {
            name: 'return',
            type: {
              name: 'Number',
              type: 'string',
            },
          }]
        },
        {
          name: 'data',
          type: 'class',
          value: [{
            name: 'clone',
            type: {
              name: 'String',
              type: 'string',
            },
          }, {
            name: 'other',
            type: {
              name: 'Number',
              type: 'string'
            }
          }]
        },
        {
          note: '多类型注释',
          type: 'multiple-type',
          value: [{
            name: './form/ee-form.vue.field',
            type: 'ref',
          }, {
            name: '',
            type: 'enum',
            value: [{
              name: 'up',
            }, {
              name: 'down',
            }, {
              name: 'left',
            }, {
              name: 'right',
            }]
          }]
        }
      ]
    }
  },
  props: {
  },
  computed: {
    component() {
      const name = this.c || this.$route.path.substring(1) || 'ee-button';
      return this.components.find(i => i.value.name == name).value;
    },
    propsCode() {
      return "<ee-button>Button</ee-button>"
    },
  },
  methods: {
    compile() {
      this.dapp = compileVue(this.code, { ...this });
    },
    savePreview(code, demo) {
      console.log('?显示保存弹窗', demo)
      this.saveDialogFlag = true;
      this.beSave = demo;
    },
    preImport() {
      importJson(predata => {
        // todo: 检查内容格式
        this.doc.predata = predata;
        // todo: 提示导入成功
      }, {
        accept: '.eeuipre'
      });
    },
    preOutput() {
      const content = JSON.stringify(this.doc.predata);
      var date = new Date();
      exportContent(content, `eeuipre ${date.getFullYear()}${(date.getMonth() < 9 ? '0' : '') + (date.getMonth() + 1)}${(date.getDate() < 10 ? '0' : '') + date.getDate()}.eeuipre`)
    },
    //保存预设时的操作
    handleConfirm(result) {
      if (result === true) {
        if (Array.isArray(this.predata[this.component.name])) {
          console.log('1');
          // 如果条件为真，执行这里的代码
          this.predata[this.component.name].push({
            pretitle: this.pretitle,
            predescription: this.predescription,
            code: this.code,
          });
        } else {
          console.log('2');
          this.predata[this.component.name] = [{
            pretitle: this.pretitle,
            predescription: this.predescription,
            code: this.code,
          }];
          // 如果条件为假，执行这里的代码
        }
        console.log(this.predata);
        localStorage.setItem("predata", JSON.stringify(this.predata));
      }
    },
  },
  watch: {
    "$route"(value) {
      this.c = value.path.substring(1);
    }
  },
  mounted() {

  },
}
</script>

<style lang="scss" scoped>
header {
  height: 4em;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
  display: flex;
  position: sticky;
  top: 0;
  left: 0;
  background-color: var(--ee-bgcolor);
  z-index: 1;

  .logo {
    display: flex;
    align-items: center;
    gap: .25em;
    height: 100%;
    font-size: 1.125em;
    margin-left: 1em;

    img {
      height: 50%;
    }
  }

  .content {
    flex: 1;
    display: flex;
    gap: .5em;
    align-items: center;
    justify-content: end;
    padding: .5em;
  }
}

main {
  margin-top: 2.5em;
  display: flex;

  code {
    display: block;
    background-color: var(--line6);
    border-radius: 0.25em;
    padding: 1em;
    margin: 0.5em 0;
    font-family: inherit;
  }

  nav {
    position: static;
    width: fit-content;
    flex-shrink: 0;

    ul {
      position: sticky;
      left: 0;
      top: 6.5em;
      border-right: 1px solid var(--line3);
      height: calc(var(--height) - 6.5em);
      overflow: hidden;

      &:hover {
        overflow: auto;
      }

      > a {
        margin: 0 .5em .25em;
        padding: 0 4.5em 0 2.5em;
        line-height: 2.5em;
        display: block;
        color: var(--text3);
        border-radius: .25em;

        &:hover {
          background-color: var(--line6);
        }

        &.selected {
          background-color: var(--primary8);
          color: var(--primary1);
        }

        li {
          font-size: .875em;
        }
      }
    }
  }

  .attrs {
    flex: 1;
    padding: 0 4em 4em;

    p {
      white-space: pre-wrap;
      line-height: 2;
    }

    > h2 {
      font-weight: 500;
      margin: 1em 0;
    }

    .demos {
      margin: 2em 0;
      display: flex;
      flex-direction: column;
      gap: 2em;
    }

    .demo .ee-table {
      // padding: 1.5em 0;
    }

    .ee-table {
      white-space: pre-wrap;
    }
  }

  .preview {
    position: static;
    width: fit-content;
    flex-shrink: 0;

    > * {
      position: sticky;
      left: 0;
      top: 6.5em;
      border-right: 1px solid var(--line3);
      height: calc(var(--height) - 6.5em);
    }
  }

  .save {
    min-width: min(40em, 88vw);
    display: flex;
    flex-direction: column;
    gap: .5em;

    > * {
      display: flex;

    }
  }
}
</style>